.input {
  background-color: hsla(var(--input-bg));
  border: 1px solid hsla(var(--app-border));
  @apply inline-flex h-8 w-full items-center rounded-md border px-3 transition-colors;
  @apply focus-within:outline-none focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-[hsla(var(--primary-bg))] focus-visible:ring-offset-0;
  @apply file:border-0 file:bg-transparent file:font-medium;
  @apply hover:border-[hsla(var(--primary-bg))];

  &__wrapper {
    position: relative;
  }

  &.text-right {
    text-align: right;
  }

  &::placeholder {
    color: hsla(var(--input-placeholder));
  }

  &:disabled {
    color: hsla(var(--disabled-fg));
    background-color: hsla(var(--disabled-bg));
    cursor: not-allowed;
    border: none;
  }

  &__prefix-icon {
    @apply absolute left-3 top-1/2 -translate-y-1/2 cursor-pointer;
    color: hsla(var(--input-icon));
    + .input {
      padding-left: 32px;
    }
  }

  &__suffix-icon {
    @apply absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer;
    color: hsla(var(--input-icon));
    + .input {
      padding-right: 32px;
    }
  }
}
